<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: landeqing
  Date: 2017/12/25
  Time: 15:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><html>
<head>
    <title>添加收货地址</title>
    <script type="text/javascript">
//        $(function() {
//            // setCity("top", "0");//页面加载时就现实数据库第一个数据，一定要加上
//            setCity("top", "0");
//            $("#top").change(function() {
//                // 当省级改变的时候，让市级和县级文本清空
//                $("#center option").remove();
//                $("#button option").remove();
//                //获得省级的id
//                var pid=$("#top option:selected").attr("id");
//                //加载该省级的市级数据
//                setCity("center", pid);
//            });
//            $("#center").change(function() {
//                //当市级改变的时候，让县级文本清空
//                $("#button option").remove();
//                //获取城市的pid
//                var pid=$("#center option:selected").attr("id");
//                //加载该省市级的县级数据
//                setCity("button",pid );
//            });
//        });
//        //selectid:select标签的id，pid数据库省级县级的pid
//        function setCity(selectid, pid) {
//            $.ajax({
//                url : "/code_20150406(Ajax_XStream_Json)/city/cityList?pid="+pid,
//                type : "get",
//                cache : false,
//                success : function(res) {
//                    //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
//                    var arr = eval(res);
//                    //遍历返回的json数据加载到select标签;
//                    $.each(arr, function(key, val) {
//                        $("#" + selectid).append(
//                            " <option id='" + val.tb_AreaId + "'>"
//                            + val.areaName + "</option>");
//                    });
//                }
//            });
//        };
            //市的ajax
        function cityList() {
            var p_id=$("#top").val();
           $("#center option").remove();
           $.ajax({
               url : "/orderAddress/city?pid="+p_id,
               type : "get",
               cache : false,
               success : function(res) {
                   //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
                   var city = eval(res);
                  // alert(arr);
                  //遍历返回的json数据加载到select标签;
                   /*  $.each(arr, function(key, val) {
                        $("#" + center).append(
                             " <option id='" + val.id + "'>"
                             + val.c_name + "</option>");
                   });*/
                   for(var i=0,l=city.length;i<l;i++){
                       var option=document.createElement("option");
                       $(option).val(city[i].id);
                       $(option).text(city[i].c_name);
                       $('#center').append(option);
                   }
                   xianList();
                }
           });

        }
        //县的ajax
            function xianList() {
                var c_id=$("#center").val();
               // alert(c_id);
                $("#button option").remove();
               // alert(c_id);
                $.ajax({
                    url : "/orderAddress/xian?cid="+c_id,
                    type : "get",
                    cache : false,
                    success : function(res) {
                        //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
                        var xian = eval(res);
                        //遍历返回的json数据加载到select标签;
//                        $.each(xian, function(key, val) {
//                            alert(key,val);
//                            $("#" + button).append(
//                                " <option id='" + val.id + "'>"
//                                + val.x_name + "</option>");
//                        });
                        for(var i=0,l=xian.length;i<l;i++){
                            var option=document.createElement("option");
                            $(option).val(xian[i].id);
                            $(option).text(xian[i].x_name);
                            $('#button').append(option);
                        }

                    }
                });

}
$(function(){
    cityList();
});

    </script>
</head>
<body>
<form action="/orderAddress/save" method="post">
    <tr>
    <td><input name="id" type="hidden"/></td>
        <td>收货人：<input name="userName" type="text" value=""/></td><br/>
        <td>手机号码：<input name="phone" type="text" value=""/></td><br/>
        <td>所在地区：
            <select name="district" id="top" onchange="cityList()">
            <c:forEach var="obj" items="${pList}">
            <option value="${obj.id}">${obj.p_name}</option>
            </c:forEach>
        </select>&nbsp;&nbsp;
            <select name="district" id="center" onchange="xianList()">
            <option selected="selected">请选择城市</option>
        </select>&nbsp;&nbsp;
            <select name="district" id="button">
            <option selected="selected">请选择县/区</option>
        </select>
        </td><br/>
        <td>详细地址：<input name="address" type="text" value=""/></td><br/>
        <td>
            <input type="submit" value="提交"/>
        </td>
    </tr>

</form>

</body>
</html>
